<template>
    <a-row>
        <a-col :span="8">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('className','类名')">
                <a-input :placeholder="i18n('className','请输入类名','input')" v-model="mdl.className" />
            </a-form-item>
        </a-col>
        <a-col :span="8">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('package','包名')">
                <a-input :placeholder="i18n('package','请输入包名','input')" v-model="mdl.package" />
            </a-form-item>
        </a-col>
        <a-col :span="8">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="i18n('packageName','子系统名称')">
                <a-input :placeholder="i18n('packageName','请输入子系统名称','input')" v-model="mdl.packageName" />
            </a-form-item>
        </a-col>
        <a-col :span="24">
            <a-form-item :labelCol="labelCol1" :wrapperCol="wrapperCol1" :label="i18n('fieldConfig','字段配置')">
                <div class="table-operator">
                    <a-button type="primary" @click="onReload" icon="plus">{{i18n('reload','重新加载')}}</a-button>
                    <a-button type="danger" @click="onDel" icon="delete">{{$ti18('rxList.delBtn','删除')}}</a-button>
                    <a-button @click="upRow" icon="up">{{$comi18('grid.up','向上')}}</a-button>
                    <a-button @click="downRow" icon="down">{{$comi18('grid.down','向下')}}</a-button>
                </div>
                <rx-grid ref="attrList"
                         :dataSource="attrList"
                         :allowRowSelect="true"
                         :multiSelect="true"
                         :showPage="false"
                         :idField="idField"
                         :columns="attrColumns"
                         style="min-height: 300px">
                    <span slot="fieldName" slot-scope="{text,record,index}">
                        <a-input :disabled="true" v-model.trim="record.fieldName" />
                    </span>
                    <span slot="name" slot-scope="{text,record,index}">
                        <a-input v-model.trim="record.name" />
                    </span>
                    <span slot="comment" slot-scope="{text,record,index}">
                        <a-input v-model.trim="record.comment" />
                    </span>
                    <span slot="control" slot-scope="{text,record,index}">
                        <a-select :disabled="true" style="width:100%;" :options="controls" v-model.trim="record.control" />
                    </span>
                    <span slot="action" slot-scope="{ text, record }" class="actionIcons">
                        <span v-if="showSetting(record)" @click.stop="editRow(record)">{{$ti18('rxList.editBtn','编辑')}}</span>
                        <span v-if="showDel(record)" @click.stop="delRow(record)">{{$ti18('rxList.delBtn','删除')}}</span>
                    </span>
                </rx-grid>
                <a-drawer class="entityDrawer" :title="i18n('fieldAttr','字段属性')" :width="300" placement="right" :closable="false"
                          :zIndex="1100" :visible="entityDrawerVisible"
                          @close="onClose">
                    <div class="table-page-search-wrapper align ">
                        <a-row :gutter="24" style="margin-top: 10px">
                            <a-col :span="24">
                                <a-form-item :label="i18n('comment','备注')">
                                    <a-input v-model="controlJson.comment" style="width: 100%;"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item :label="i18n('attrName','属性名')">
                                    <a-input v-model.trim="controlJson.name" style="width: 100%;"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item :label="i18n('fieldName','字段名')">
                                    <a-input :disabled="true" v-model.trim="controlJson.fieldName" style="width: 100%;"/>
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item :label="i18n('controlType','控件类型')">
                                    <a-select :disabled="true" :options="controls" v-model="controlJson.control" style="width: 100%;"/>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-form-item :label="i18n('valueSource','数据来源')">
                                <a-button @click="setSetting">{{i18n('config','配置')}}</a-button>
                            </a-form-item>
                        </a-row>
                        <div style="padding-top:10px;text-align: center; margin-top:10px;width:100%;border-top:#ccc 1px solid">
                            <a-button @click="saveAttr" type="primary" icon="save">{{$ti18('rxForm.saveBtn','保存')}}</a-button>
                            <a-button style="margin-left: 4px;" @click="delRow(controlJson)">{{$ti18('rxList.delBtn','删除')}}</a-button>
                        </div>
                    </div>
                </a-drawer>
            </a-form-item>
        </a-col>
    </a-row>
</template>

<script>
    import {Util} from "@lowcode/jpaas-common-lib";
    import FormCodegenBusinessEdit3BoControls from "./FormCodegenBusinessEdit3BoControls";
    import FormBoControlRef from "../../bo/FormBoControlRef";

    export default {
        name: "FormCodegenBusinessEdit3Panel",
        props:["config","formData"],
        mixins:[FormCodegenBusinessEdit3BoControls],
        components:{
            FormBoControlRef
        },
        data(){
            return {
                labelCol: {span: 6},
                wrapperCol: {span: 18},
                labelCol1: {span: 3},
                wrapperCol1: {span: 19},
                mdl:{},
                attrColumns:[
                    {title: this.$ti18('rxList.index','序号'), type: 'indexColumn', width: 60, dataIndex: 'serial', scopedSlots: {customRender: 'serial'}},
                    {title: this.i18n('comment','备注'), dataIndex: 'comment', allowCellEdit: false, width: 130, scopedSlots: {customRender: 'comment'}},
                    {title: this.i18n('fieldName','字段名'), dataIndex: 'fieldName', width: 120, allowCellEdit: false, scopedSlots: {customRender: 'fieldName'}},
                    {title: this.i18n('name','属性名'), dataIndex: 'name', width: 120, allowCellEdit: false, scopedSlots: {customRender: 'name'}},
                    {title: this.i18n('control','控件'), dataIndex: 'control', width: 130, allowCellEdit: false, scopedSlots: {customRender: 'control'}},
                    {title: this.$ti18('rxList.action','操作'), dataIndex: 'action', allowCellEdit: false, width: 60, scopedSlots: {customRender: 'action'}}
                ],
                attrList:[]
            }
        },
        created(){
            this.init();
        },
        methods:{
            i18n(name,text,key){
                return this.$ti18(name,text,"formCodegenBusiness.edit3",key);
            },
            init(){
                this.mdl=this.config;
                this.attrList.push(...Util.deepClone(this.mdl.newAttrList || this.mdl.attrList));
            },
            onReload(){
                this.attrList.length=0;
                this.attrList.push(...Util.deepClone(this.mdl.attrList));
            },
            onDel(){
                let rows=this.$refs.attrList.getSelectedRows();
                for(let i=0;i<rows.length;i++){
                    if(!this.showDel(rows[i])){
                        continue;
                    }
                    this.delRow(rows[i]);
                }
            },
            upRow(){
                this.$refs.attrList.moveUp();
            },
            downRow(){
                this.$refs.attrList.moveDown();
            },
            delRow(record){
                let ary=[record[this.idField]];
                if(record.extJsonObj && record.extJsonObj.ref) {
                    ary.push(...this.$refs.attrList.findRows(function (row) {
                        return row.fieldName == record.extJsonObj.ref;
                    }).map(item=>{
                        return item[this.idField];
                    }))
                }
                this.$refs.attrList.removeRows(ary);
            },
            checkChinese(val){
                if(!val){
                    return true;
                }
                if (!(/^[a-zA-Z][a-zA-Z0-9_]*$/g.test(val))) {
                    return false;
                }
                return true;
            },
            validAttrList(){
                for(var i=0;i<this.attrList.length;i++){
                    var attr=this.attrList[i];
                    if(!this.checkChinese(attr.name)){
                        return {success:false,message: this.i18n('msg.field','字段')+'['+attr.fieldName+']，'+this.i18n('msg.tip','属性名要求英文+数字,英文开头!')};
                    }
                }
                return {success:true};
            },
            getData(){
                var result=this.validAttrList();
                if(!result.success){
                    return result;
                }
                return Object.assign(result,{data:Object.assign(this.mdl,{
                    newAttrList:this.attrList,
                    className:this.mdl.className,
                    package:this.mdl.package,
                    packageName:this.mdl.packageName
                })});
            }
        }
    }
</script>

<style scoped>

    .entityDrawer >>> .ant-drawer-body {
        padding: 0px !important;
    }

    .ant-row {
        padding-right: 10px;
    }

    .ant-form {
        height: 100%;
    }

    .ant-form-inline .ant-form-item {
        display: flex;
    }

    .align >>> .ant-form-item-label {
        width: 90px;
    }

    .align >>> .ant-row {
        margin-right: 0;
    }

    .table-page-search-wrapper.align {
        height: 100%;
    }
    .table-page-search-wrapper >>> .ant-form-item{
        margin-bottom: 4px!important;
        margin-right: 0!important;
    }
    .table-page-search-wrapper >>> .ant-row {
        display: flex;
        flex-flow: wrap;
    }
</style>